<template>
  <el-container class="container">
    <!-- 页面顶栏 -->
    <el-header class="header" height="80px">
      <div class="title">JQKit</div>
      <div>
        <el-select v-model="selectedVerison">
          <el-option key="1" label="0.0.1" value="1" />
          <el-option key="0" label="暂时就这一个版本" value="0" :disabled="true" />
        </el-select>
        <el-select v-model="selectedLanguage" style="margin-left: 20px;">
          <el-option key="1" label="中文" value="1" />
          <el-option key="2" label="English" value="2" :disabled="true" />
        </el-select>
      </div>
    </el-header>
    <!-- end 页面顶栏 -->

    <!-- 页面下方容器 -->
    <el-container class="container-bottom">
      <!-- 侧边栏 -->
      <el-aside 
        :class="isCollapse ? 'aside aside-collapse' : 'aside'" 
        width="240px"
      >
        <custom-menu 
          :isCollapse="isCollapse"
          @handleSelectAction="handleSelectAction"
        />
      </el-aside>
      <!-- end 侧边栏 -->

      <!-- 页面右侧容器 -->
      <el-container ref="scrollBody" class="container-right">
        <!-- 主要区域容器 -->
        <el-main class="main">
          <div class="content">
            <!-- 每个菜单项的标题 -->
            <div class="title">{{ selectedMenu ? selectedMenu.title : "" }}</div>
            <!-- 每个菜单项的页面 -->
            <div class="page" v-if="selectedMenu && selectedMenu.component" :is="selectedMenu.component"></div>
          </div>
          <el-button
            v-if="showBackTopBtn"
            class="back-top-btn" 
            icon="el-icon-caret-top" 
            circle
            @click="handleBackTop"
          ></el-button>
        </el-main>
        <!-- end 主要区域容器 -->

        <!-- 页面底栏 -->
        <el-footer class="footer" height="100px">
          <div class="title">Demo Footer</div>
        </el-footer>
        <!-- end 页面底栏 -->
      </el-container>
      <!-- end 页面右侧容器 -->
    </el-container>
    <!-- end 页面下方容器 -->
  </el-container>
</template>

<script>
import CustomMenu from "./customMenu.vue";
export default {
  name: "JQKitIndex",
  components: {
    CustomMenu
  },
  computed: {
    isCollapse() {
      return this.$store.state.jqkit.menuSwitchStatus;
    }
  },
  data() {
    return {
      selectedMenu: null,
      selectedVerison: "1",
      selectedLanguage: "1",
      showBackTopBtn: false,
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 监听滚动事件
      const el = this.$refs.scrollBody.$el;
      el.addEventListener('scroll', this.handleScroll);
    })
  },
  created() {
  },
  beforeDestroy() {
    // 在组件销毁时移除滚动事件监听器
    const el = this.$refs.scrollBody.$el;
    el.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleSelectAction(menu) {
      this.selectedMenu = menu;
    },
    handleScroll() {
      // 判断页面是否向下滚动超过一定距离
      const el = this.$refs.scrollBody.$el;
      if (el.scrollTop > 100) {
        this.showBackTopBtn = true;  // 显示按钮
      } else {
        this.showBackTopBtn = false;  // 隐藏按钮
      }
    },
    handleBackTop() {
      // 页面平滑滚动回顶部
      const el = this.$refs.scrollBody.$el;
      el.scrollTo({ top: 0, behavior: 'smooth' });
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .header {
    margin: 0 10%;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    .title {
      font-size: 28px;
      font-weight: bolder;
      color: orange;
      font-style: italic;
    }
    ::v-deep .el-select .el-input__inner {
      width: 100px;
      border: none;
    }
  }
  .container-bottom {
    height: calc(100% - 80px);
    width: 90%;
    margin-left: 10%;
    overflow: unset;
    .aside {
      padding: 0;
      margin-bottom: 0;
      background-color: #fff;
    }
    .aside-collapse  {
      width: 64px !important;
    }
    .container-right {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      .main {
        position: relative;
        overflow: unset;
        .content {
          background-color: #fff;
          margin-right: calc(10vw - 20px);
          .title {
            font-size: 28px;
            font-weight: normal;
            color: orange;
          }
          .page {
            width: 100%;
            min-height: 50vh;
            margin: 10px 0;
            background-color: #fff;
          }
        }
        .back-top-btn {
          position: fixed;
          bottom: 100px;
          right: 5%;
          color: orange;
        }
      }
      .footer {
        .title {
          font-size: 14px;
          font-weight: bold;
          color: orange;
          font-style: italic;
        }
      }
    }
  }
}
</style>